<template>
    <view class="component bg-fff">
        <view class="contentWrap flex" @click="clickNotice">
            <image class="title" src="https://image.srea.org.cn/xcx/yaohao-gongshi-title-bg.jpg" mode="widthFix"></image>
            <view class="noticeWrap notice-scroll" :class="backgroundColor ? '' : 'defBgSty'" :style="{ background: backgroundColor }">
                <view class="noticeBody flex">
                    <view class="notice-content">
                        <text class="notice-text" :style="textStyle" v-for="(item, index) in text" :key="index">{{ item.title }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { computed } from 'vue';

    const props = defineProps({
        // 滚动文本
        text: {
            type: Array,
            default: []
        },
        // 背景颜色
        backgroundColor: {
            type: String,
            default: ''
        },
        // 文字颜色
        textColor: {
            type: String,
            default: '#333333'
        },
        // 字体大小
        fontSize: {
            type: [Number, String],
            default: 28
        }
    });

    // 计算动画时长
    let animationDuration = computed(() => {
        let textLength = props.text.length;
        return textLength * 3.3 + 's';
    });

    // 计算内容样式
    const textStyle = computed(() => ({
        fontSize: `${props.fontSize}rpx`,
        color: props.textColor
    }));


    //点击
	function clickNotice() {
		uni.navigateTo({
			url: '/pages/products/yao-hao-gong-shi/list/index'
		});
    }
</script>

<style lang="scss" scoped>
	.component{
        padding: 10rpx 20rpx 0 20rpx;
        .contentWrap{
            justify-content: space-between;
            align-items: stretch;
            max-height: 60rpx;
            .title{
                width: 150rpx;
            }
            .defBgSty{
                background-image: linear-gradient(to right, #F6BDA9 10%, #ffffff 60%);
            }
            .noticeWrap{
                width: calc(100% - 156rpx);
                position: relative;
                overflow: hidden;
                .noticeBody{
                    height: 100%;
                    justify-content: flex-start;
                }
                
                .notice-content {
                    position: absolute;
                    white-space: nowrap;
                    animation-name: scrollText;
                    animation-timing-function: linear;
                    animation-duration: v-bind(animationDuration);
                    animation-iteration-count: infinite;
                    
                    .notice-text {
                        display: inline-block;
                        padding-right: 50rpx;
                    }
                }
            }
        }
    }
    
    @keyframes scrollText {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
</style>